<template>
    <div id="app">
        <!--导航栏-->
        <div class="navWrap">
            <el-row type="flex" justify="space-between" align="middle">
                <el-col :span="3"></el-col>
                <el-col :span="18" style="max-width: 1440px">
                    <el-row type="flex" justify="space-between" align="middle">
                        <el-col :span="2">
                            <img src="./assets/logo.png" alt="" class="logo"/>
                        </el-col>
                        <el-col :span="11">
                            <ul>
                                <li @click="navClick('advantage')">Service advantage</li>
                                <li @click="navClick('successExample')">Case</li>
                                <li @click="navClick('cooperation')">Cooperation</li>
                                <li @click="navClick('contact')">contact us</li>
                            </ul>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
        <!--页面-->
        <router-view/>
    </div>
</template>

<script>
export default {
    data() {
        return {
            navIndex: "/",
            /*导航映射对象*/
            navObj: {
                advantage() {
                    const top = document.getElementsByClassName("page")[0].offsetTop;
                    window.scrollTo({
                        top,
                        behavior: "smooth"
                    });
                },
                successExample() {
                    const top = document.getElementsByClassName("page")[6].offsetTop;
                    window.scrollTo({
                        top,
                        behavior: "smooth"
                    });
                },
                cooperation() {
                    const top = document.getElementsByClassName("page")[7].offsetTop;
                    window.scrollTo({
                        top,
                        behavior: "smooth"
                    });
                },
                contact() {
                    const top = document.getElementsByClassName("page")[8].offsetTop;
                    window.scrollTo({
                        top,
                        behavior: "smooth"
                    });
                }
            },
        };
    },
    methods: {
        navClick(className) {
            this.navObj[className]();
        }
    }
};
</script>

<style lang="scss">
#app {
    overflow: hidden;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul, li {
    list-style: none;
}

.navWrap {
    padding-top: 24px;
    height: 45px;
    background: black;

    .logo {
        width: 100%;
    }

    ul {
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
            display: flex;
            align-items: center;
            font-size: 16px;
            letter-spacing: 0.27px;
            color: #FFFFFF;
            cursor: pointer;

            &:last-child {
                margin-right: 0;
            }

            span {
                opacity: 0.4;
            }

            .line {
                width: 1px;
                height: 6px;
                background: #fff;
                margin: 0 8px;
            }

            .active {
                opacity: 1;
            }
        }
    }
}
</style>
